<template>
<div class="zt">
    <!-- 内容区导航 -->
    <div class="ZTnav">
        <div>
            <div class="ZTinpt">
                <span>主机ID</span>
                <el-input placeholder="请输入" v-model="searchCondition.deviceId"></el-input>
            </div>
            <div class="ZTinpt">
                <span>主机名称</span>
                <el-input placeholder="请输入" v-model="searchCondition.hostName"></el-input>
            </div>
            <div class="ZTinpt">
                <span>项目名称</span>
                <el-select v-model="searchCondition.proId" placeholder="请选择">
                    <el-option v-for="pro in proList" :key="pro.pid" :label="pro.proName" :value="pro.pid">
                    </el-option>
                </el-select>
            </div>
            <div class="ZTinpt">
                <span>升级状态</span>
                <el-select v-model="searchCondition.updateStatus" placeholder="请选择">
                    <el-option v-for="item in sjzt" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="ZTinpt">
                <span>固件版本</span>
                <el-select v-model="searchCondition.updateVersion" placeholder="请选择">
                    <el-option v-for="item in packageList" :key="item.version" :label="item.version" :value="item.version">
                    </el-option>
                </el-select>
            </div>
            <div class="ZTinpt">
                <span>协议类型</span>

                <el-select v-model="searchCondition.protocalType" placeholder="请选择">
                    <el-option v-for="item in protocalList" :key="item.value" :label="item.value" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="ZTnav2">
                <div class="ZTinpt">
                    <span>最近升级时间</span>
                    <el-date-picker v-model="searchCondition.time" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
                    </el-date-picker>
                </div>
                <div class="xzgw_btn">
                    <el-button id="upgarde-query" icon="el-icon-search" size="mini" @click="conditionSearch(1,numVal)">查询</el-button>
                    <el-button icon="el-icon-refresh-right" size="mini" @click="resetCondition">重置</el-button>
                </div>
            </div>
            <div class="an_box">
                <el-button @click="plxqShow()" icon="el-icon-upload" size="mini">批量升级</el-button>
            </div>
        </div>
    </div>
    <!-- 内容区 -->
    <div class="ZTcontent">
        <!-- el表格 -->
        <div class="sbzt_table">
            <el-table :header-cell-style="{background:'#EBF1FC',color:'#606266'}" :data="gxDetails" border stripe style="width: 100%" @selection-change="selectChange">
                <el-table-column align="center" type="selection" width="60"></el-table-column>
                <el-table-column prop="id" label="序号" width="60">
                </el-table-column>
                <el-table-column prop="hostName" label="主机名称">
                </el-table-column>
                <el-table-column prop="deviceId" label="主机ID">
                </el-table-column>
                <el-table-column prop="busNumber" label="车牌号">
                </el-table-column>
                <el-table-column prop="proName" label="项目">
                </el-table-column>
                <el-table-column prop="protocalType" label="协议类型">
                </el-table-column>
                <el-table-column prop="updateVersion" label="固件版本">
                </el-table-column>
                <el-table-column prop="updateTime" label="最近升级时间">
                </el-table-column>
                <el-table-column prop="updateStatus" label="升级状态">
                    <template slot-scope="scope">
                        <span style="width:16px !important;height:16px !important; display:inline-block;" :class="scope.row.updateStatus == '升级成功' ? 'upsuccess': scope.row.updateStatus == '升级失败' ? 'upfailed':scope.row.updateStatus == '升级中'?'uping':''">
                        </span>
                        <span>
                            {{scope.row.updateStatus}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="dgxqShow(scope.row.deviceId)">升级</el-button>
                        <el-button type="text" size="small" @click="detailShow_bianji(scope.row.deviceId)">查看记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="ZTfooter">
            <span>共{{ infoTotal }}条</span>
            <el-select v-model="numVal" @change="pageTotalChange">
                <el-option v-for="item in num" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-pagination layout="prev, pager, next" :total="this.totalPage" :current-page="currenPage" :page-size="this.pageSize" @current-change="handleCurrentChange">
            </el-pagination>
            <div class="goPage">
                <span>前往</span>
                <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="pageNumber" placeholder="1"></el-input>
                <span>页</span>
                <el-button class="goPageBtn" type="goon" @click="goPage">确定</el-button>
            </div>
        </div>
    </div>
    <el-dialog :visible="detailShow" width="828px" :before-close="closeRecord" class="upgrade_select">
        <div slot="title" class="record_header">
            <div class="record_title">
                固件升级记录
            </div>
        </div>
        <div class="sjjl_table">
            <el-table :header-cell-style="{background:'#EBF1FC',color:'#606266'}" :data="jlDetails" border stripe style="width: 100%">
                <el-table-column prop="id" label="序号" width="60">
                </el-table-column>
                <el-table-column prop="packageName" label="升级包名称">
                </el-table-column>
                <el-table-column prop="version" label="固件版本">
                </el-table-column>
                <el-table-column prop="completeTime" label="升级时间">
                </el-table-column>
                <el-table-column prop="upgradeStatus" label="状态">
                </el-table-column>
                <el-table-column prop="startTime" label="系统操作时间">
                </el-table-column>
            </el-table>
        </div>
    </el-dialog>

    <el-dialog :visible="xqShow" width="460px" :before-close="upgradeCancel" class="upgrade_select">
        <div class="upgrade_header" slot="title">
            <div class="upgrade_title">固件升级</div>
        </div>
        <el-form class="grade" :rule="upgradeRule" :model="upgradeVersion" ref="upgradeVersion">
            <div class="formItem">
                <!-- <span class="quxiao" @click="xqHide()"></span> -->
                <el-form-item class="sjxq_nr" label="选择升级到版本：" prop="version">
                    <el-select v-model="upgradeVersion.index" placeholder="请选择">
                        <el-option v-for="(pack,index)  in packageList" :key="pack.version" :label="pack.packageName" :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
        </el-form>
        <!-- <div slot="footer" class=""> -->
        <el-button class="upgrade_confirm" @click="upgradeConfirm()">升级</el-button>
        <el-button class="upgrade_cancel" @click="upgradeCancel()">取消</el-button>
        <!-- </div> -->

    </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        var versionTest = (rule, value, callback) => {
            if (this.curSelectDevice.length == 1) {
                let compare = this.compareVersion(this.curSelectDevice[0], value)
                if (this.curSelectDevice[0].updateVersion == this.versionList[0]) {
                    callback(new Error('当前已为最新版本！'))
                } else if (compare == 1)
                    callback(new Error('你选择的版本低于当前版本！'))
            }
        };
        return {
            num: [
                {
                    value: 3,
                    label: "3条/页",
                },{
                    value: 20,
                    label: "20条/页",
                },
                {
                    value: 50,
                    label: "50条/页",
                },
                {
                    value: 100,
                    label: "100条/页",
                },
            ],
            value: "",
            value1: "",
            numVal: 20,
            pageNumber: "",
            infoTotal: 0,
            currenPage: 1,
            totalPage: 100,
            pageSize: 10,
            gxDetails: [],
            jlDetails: [],
            proList: [],
            searchCondition: {
                deviceId: "",
                hostName: "",
                proId: "",
                updateStatus: "",
                updateVersion: "",
                protocalType: "",
                time: [],
            },
            packageList: [],
            upgradeVersion: {
                index: 0
            },
            versionList: [],
            curSelectDevice: [],
            deviceIds: [],
            upgradeRule: {
                version: [{
                    required: true,
                    validator: versionTest,
                    trigger: 'change'
                }]
            },
            sjzt: [{
                    value: '升级成功',
                    label: "升级成功"
                },
                {
                    value: '升级失败',
                    label: "升级失败"
                },
                {
                    value: '升级中',
                    label: "升级中"
                },
            ],
            protocalList: [
                {
                    value:"",
                    label:""
                },
                {
                value: "ProtocalEMP",
                label: "MQTT协议"
            }],
            sjbb: [{
                value: 1,
                label: "sos升级V1.1"
            }, ],
            statusList: [{
                    value: 16,
                    label: "在线"
                },
                {
                    value: 17,
                    label: "离线"
                },
            ],
            detailDeviceInfo: {
                proName: "",
                hostName: "",
                serialNo: "",
                mac: "",
                manufacturer: "",
                installPosition: "",
                protocalType: "",
                firmwareVersion: "",
                hostIp: "",
                frontCameraId: "",
                MiddleCameraId: "",
                RearCameraId: "",
            },
            detailShow: false,
            xqShow: false,
        };
    },
    created() {
        this.getProjectList();
        this.changePageList(1, this.numVal);
        this.getPackList();
    },
    methods: {
        getProjectList() {
            let _this = this;
            _this.$axios
                .get("/project/getAll")
                .then((res) => {
                    res.data.data.forEach((pro) => {
                        _this.proList.push({
                            pid: pro.pid,
                            proName: pro.proName,
                        });
                    });
                })
                .catch();
        },
        resetCondition() {
            let _this = this;
            _this.searchCondition = {
                    deviceId: "",
                    hostName: "",
                    proId: "",
                    updateStatus: "",
                    updateVersion: "",
                    protocalType: "",
                    time: [],
                },
                _this.changePageList(1, _this.numVal);
        },
        conditionSearch(page, limit) {
            let _this = this;
            let startTime = "",
                endTime = "";
            if (_this.searchCondition.time.length > 0) {
                startTime = _this.searchCondition.time[0];
                endTime = _this.searchCondition.time[1]
            }
            _this.$axios.post("/upgrade/condition/" + page + "/" + limit, {
                    ..._this.searchCondition,
                    startTime: startTime,
                    endTime: endTime
                })
                .then((res) => {
                    let data = res.data.data;
                    let records = data.records;
                    _this.infoTotal = data.total;
                    // _this.totalPage = _this.infoTotal;
                    _this.pageSize = _this.numVal;
                    _this.gxDetails = [];
                    for (let i = 0; i < records.length; i++) {
                        let update = records[i];
                        this.gxDetails.push({
                            id: (page - 1) * limit + 1 + i,
                            deviceId: update.deviceId,
                            updatePackageName: update.updatePackageName,
                            updateVersion: update.updateVersion,
                            updateTime: update.updateTime,
                            updateStatus: update.updateStatus,
                            startTime: update.startTime,
                            endTime: update.endTime,
                            packageId: update.packageId,
                            hostName: update.hostName,
                            busNumber: update.busNumber,
                            proName: update.proName,
                            protocalType: update.protocalType
                        });
                    }
                }).catch()
        },
        showDetailPage(deviceId) {
            let _this = this;
            _this.$axios.get("/device/detail?deviceId=" + deviceId)
                .then((res) => {
                    let deviceInfo = res.data.data;
                    _this.detailDeviceInfo = {
                        deviceId: deviceInfo.deviceId,
                        proName: deviceInfo.proName,
                        hostName: deviceInfo.hostName,
                        serialNo: deviceInfo.serialNo,
                        mac: deviceInfo.mac,
                        manufacturer: deviceInfo.manufacturer,
                        installPosition: deviceInfo.installPosition,
                        protocalType: deviceInfo.protocalType,
                        firmwareVersion: deviceInfo.firmwareVersion,
                        hostIp: deviceInfo.hostIp,
                        frontCameraId: deviceInfo.frontCameraId,
                        middleCameraId: deviceInfo.middleCameraId,
                        rearCameraId: deviceInfo.rearCameraId,
                    }
                    _this.detailShow = true;
                }).catch()
        },
        detailHide() {
            let _this = this;
            _this.detailShow = false;
        },
        upgradeConfirm() {
            let _this = this;
            let packinfo = _this.packageList[_this.upgradeVersion.index]

            this.$confirm(`确实将该设备固件版本升级至 ${packinfo.version} ？`)
                .then(e => {

                    _this.$axios.post("/upgrade/upgradeFirmware", {
                            deviceIds: _this.deviceIds,
                            packageName: packinfo.packageName,
                            version: packinfo.version,
                            packageUrl: packinfo.packageUrl
                        })
                        .then(res => {
                            _this.$message(res.data);
                            _this.xqShow = false;
                             _this.conditionSearch(1, _this.numVal);
                        })
                       
                    })
                    
                .catch(e => {});
        },
        packSelectChange(v) {},
        upgradeCancel() {
            let _this = this;
            this.$confirm('确定退出升级吗？')
                .then(e => {
                    _this.xqShow = false;
                })
                .catch(e => {});
        },
        closeRecord() {
            let _this = this;
            _this.detailShow = false;
        },
        detailShow_bianji(deviceId) {
            let _this = this;
            _this.$axios.get(`upgrade/checkRecord?deviceId=${deviceId}`)
                .then(res => {
                    _this.detailShow = true;
                    let data = res.data.data;
                    _this.jlDetails = [];
                    for (let i = 0; i < data.length; i++) {
                        _this.jlDetails.push({
                            id: i + 1,
                            deviceId: data[i].deviceId,
                            packageName: data[i].packageName,
                            version: data[i].version,
                            completeTime: data[i].completeTime,
                            upgradeStatus: data[i].upgradeStatus,
                            startTime: data[i].startTime
                        })
                    }
                })
                .catch(e => {

                })

        },
        plxqShow() {
            let _this = this;
            _this.deviceIds = [];
            if (_this.curSelectDevice.length == 0) {
                _this.$message.error("请选择需要进行升级的设备！")
            } else {
                _this.deviceIds = _this.curSelectDevice;
                _this.xqShow_bianji();
            }
        },
        dgxqShow(deviceId) {
            let _this = this;
            _this.deviceIds = [];
            _this.deviceIds.push(deviceId);
            _this.xqShow_bianji();
        },
        getPackList() {
            let _this = this;
            _this.$axios.post("/upgrade/checkPackageVersion")
                .then((res) => {
                    let data = res.data.data;
                    _this.packageList = [];
                    data.forEach(element => {
                        _this.packageList.push({
                            packageName: element.packageName,
                            version: element.version,
                            packageUrl: element.packageUrl,
                            importTime: element.importTime
                        })
                    });
                })
                .catch()
        },
        xqShow_bianji() {
            let _this = this;
            _this.xqShow = true;
            _this.getPackList();

            // _this.$axios.post("/upgrade/checkUpdateVersion")
            //     .then((res) => {
            //         let data = res.data.data;
            //         _this.versionList = data;
            //     })
        },
        compareVersion(version1, version2) {
            let versionIndex1 = 0;
            let versionIndex2 = 0;
            for (let i = 0; i < _this.versionList.length; i++) {
                if (version1 == _this.versionList[i]) versionIndex1 = _this.versionList[i];
                if (version2 == _this.versionList[i]) versionIndex2 = _this.versionList[i];
            }
            return versionIndex1 == versionIndex2 ? 0 : versionIndex1 > versionIndex2 ? 1 : -1;
        },
        selectChange(val) {
            this.curSelectDevice = [];
            val.forEach(e => {
                this.curSelectDevice.push(e.deviceId);
            })
        },
        handleCurrentChange(val) {
            this.currenPage = val;
            this.changePageList(val, this.numVal);
        },
        pageTotalChange(val) {
            this.totalPage = Math.ceil(this.infoTotal / val);

            this.changePageList(1, val);
        },
        goPage(){
            // console.log("this.totalPage",this.totalPage,this.pageSize,this.pageNumber,this.currenPage);
            if(this.totalPage<=this.pageSize){
                this.pageNumber =  this.currenPage = 1;
            }else{
            //判断一共有多少页
            let page = Math.ceil(this.totalPage/this.pageSize);
            this.pageNumber = this.pageNumber>page?page:this.pageNumber;
            this.currenPage = Number(this.pageNumber) ;
            }
            this.conditionSearch(this.pageNumber,this.numVal)
        },
        changePageList(page, limit) {
            let _this = this;
            _this.$axios
                .get("/upgrade/page/" + page + "/" + limit)
                .then((res) => {
                    let data = res.data.data;
                    let records = data.records;
                    _this.infoTotal = data.total;
                    _this.totalPage = this.infoTotal;
                    _this.pageSize = this.numVal;
                    _this.gxDetails = [];
                    for (let i = 0; i < records.length; i++) {
                        let update = records[i];
                        _this.gxDetails.push({
                            id: (page - 1) * limit + 1 + i,
                            deviceId: update.deviceId,
                            updatePackageName: update.updatePackageName,
                            updateVersion: update.updateVersion,
                            updateTime: update.updateTime,
                            updateStatus: update.updateStatus,
                            startTime: update.startTime,
                            endTime: update.endTime,
                            packageId: update.packageId,
                            hostName: update.hostName,
                            busNumber: update.busNumber,
                            proName: update.proName,
                            protocalType: update.protocalType
                        });
                    }

                    //
                })
                .catch();
        },
        exportTable() {
            let _this = this;
            _this.$axios({
                    method: "post",
                    url: "device/export",
                    responseType: 'blob'
                })
                .then((res) => {
                    const filename = res.headers["content-disposition"];
                    const blob = new Blob([res.data]);
                    var downloadElement = document.createElement("a");
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    downloadElement.download = decodeURIComponent(filename.split("filename=")[1]);
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                })
                .catch((e) => {
                    console.log(e);
                })
        }
    },
};
</script>

<style scoped>
.an_box>button {
    border: 1px solid #3C74E3;
    color: #3C74E3;
    font-size: 14px;
    line-height: 18px;
}

.an_box {
    float: right;
    margin-bottom: 10px;
    margin-right: 16px;
    margin-top: 20px;
}

.xzgw_btn>button:nth-child(2) {
    border: 1px solid #666666;
    color: #666666;
    font-size: 14px;
    line-height: 18px;
}

.xzgw_btn>button:nth-child(1) {
    border: 1px solid #3C74E3;
    color: #ffffff;
    background: #3C74E3;
    font-size: 14px;
    line-height: 18px;
}

.xzgw_btn {
    float: right;
    margin-right: 16px;
    margin-top: 50px;
}

.sjjl_table {
    margin-left: 5%;
    margin-right: 5%;
    height: 278px;
    overflow-y: scroll;
}

.sjjl_table::-webkit-scrollbar {
    display: none;
}

.qxan {
    margin-left: 5%;
}

.sjan {
    margin-left: 32%;
}

.upgrade_cancel {
    text-align: center;
    width: 80px;
    height: 36px;
    color: #3C74E3;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 20px;
    right: 136px;
}

.upgrade_confirm {
    text-align: center;
    width: 80px;
    height: 36px;
    color: #FFFFFF;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #3C74E3;
    position: absolute;
    bottom: 20px;
    right: 40px;
}

.upgrade_select .formItem {
    width: 100%;
    height: 148px;
    position: relative;
    /* right: 40px; */
    top: 16px;
    left: 40px;
}

.upgrade_header {
    height: 48px;
    /* background-color: #F5F5F5; */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    /* margin-bottom: 20px; */
}

.upgrade_header .upgrade_title {
    position: relative;
    font-size: 16px;
    left: 20px;
    color: rgba(0, 0, 0, 0.88);
    font-family: Arial;
    font-weight: bold;
}

/deep/ .el-dialog__header {
    padding: 0;
    transition: all .5s ease-in-out;
}

/deep/ .el-dialog {
    border-radius: 8px;
}

/deep/ .el-dialog__body {
    padding: 0;
}

.ZTnav2 {
    width: 100%;
    height: 100px;
}

/* 点击详情样式 */
.deviceDetail {
    width: 1037px;
    height: 510px;
    background: #fff;
    position: fixed;
    left: 30%;
    top: 15%;
    z-index: 999;
    /* border: 1px solid #000;*/
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
}

.record_header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    margin-bottom: 20px;
}

.record_header .record_title {
    position: relative;
    font-size: 16px;
    left: 20px;
    color: rgba(0, 0, 0, 0.88);
    font-family: Arial;
    font-weight: bold;
}

/deep/ .el-descriptions__title {
    position: relative;
    left: 20px;
}

/deep/ .el-descriptions__header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* el-descriptions-item 文字居中 */
/deep/ .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
    text-align: center;
}

/* /deep/ .el-descriptions__table {
    position: relative;
    left: 40px !important;
    width: calc(100% - 80px) !important;
}

/deep/ .el-descriptions-item__cell {
    padding-left: 16px !important;
    border: 1px solid #DDDDDD !important;
}

/deep/ .el-descriptions-item__label {

    background-color: #EBF1FC !important;
    font-size: 14px;
    color: #666666 !important;
    width: 12.5%;
}

/deep/ .el-descriptions-item__content {
    color: black;
    width: 37.5%;
} */

/* 右上角小按钮 */
.quxiao {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 20px;
    right: 16px;
    background: url(/static/img/close_b.png) no-repeat;
    background-size: 16px;
    cursor: pointer;
}

/* 内容区底部样式 */
.goPage>button:hover {
    cursor: pointer;
}

.goPage>button {
    width: 60px;
    height: 30px;
    background: #3c74e3;
    border-radius: 4px;
    border: none;
    color: #ffffff;
}

.goPage>span:nth-of-type(2) {
    padding-left: 48px;
    padding-right: 8px;
}

.goPage>span:nth-of-type(1) {
    padding-right: 8px;
}

.ZTfooter>.goPage {
    position: absolute;
    right: 10px;
    top: 10px;
}

.goPage>>>.el-input {
    width: 0 !important;
}

.goPage>.el-input>>>.el-input__inner {
    width: 40px !important;
    height: 30px !important;
    padding: 0 5px !important;
}

.el-pagination {
    position: absolute;
    right: 190px;
    top: 10px;
}

.ZTfooter>.el-select>>>.el-input__icon {
    line-height: 30px !important;
}

.ZTfooter>.el-select>>>.el-input__inner {
    width: 100px;
    height: 30px;
}

.ZTfooter>span:nth-of-type(1) {
    margin-right: 16px;
}

.ZTfooter {
    height: 44px;
    display: flex;
    align-items: center;
    border-top: 1px solid #cccccc;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 0 16px;
    margin-top: 4px;
    position: relative;
}

.ZT_bg {
    background: #f5f5f5;
}

.online {
    background: url(../../../static/img/online.png) no-repeat;
    background-size: 15px;
    color: #16a951;
    background-position: 0px 3px;
}

.offline {
    background: url(../../../static/img/off-line.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

/* 设备状态表格 */
.ZTcontent {
    height: calc(100% - 15px);
    background-color: #fff;
    margin-top: 8px;
    padding: 16px 16px 0 16px;
    box-sizing: border-box;
}

/* 输入搜索框 */
.el-select>>>.el-input__icon {
    line-height: 36px !important;
}

.el-select>>>.el-input__inner,
.el-input>>>.el-input__inner {
    width: 200px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 8px;
    box-sizing: border-box;
}

.ZTinpt>span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.6);
}

.ZTinpt {
    width: 198px;
    padding-left: 16px;
    margin-top: 12px;
    display: inline-block;
}

/* 内容导航区 */
.ZTnav {
    width: 100%;
    height: 173px;
    background-color: #fff;
    margin-top: 2px;
    margin-right: 8px;
}

.zt {
    height: calc(100% - 177px);
}

button {
    cursor: pointer;
}

/* el table */
.sbzt_table {
    width: 100%;
    height: calc(100% - 100px);
    overflow-y: scroll;
}

/* 滚动条样式 */
.sbzt_table::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.sbzt_table::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #3c74e3;
}

.sbzt_table::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f5f5f5;
}

.sbzt_table>>>.table_key {
    color: #3C74E3;
    cursor: pointer;
}

.sbzt_table .upsuccess {
    background: url(../../../static/img/393.png) no-repeat;
    background-size: 15px;
    color: #16a951;
    background-position: 0px 3px;
}

.sbzt_table .upfailed {
    background: url(../../../static/img/391.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.sbzt_table .uping {
    background: url(../../../static/img/392.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

/deep/ .el-table th.el-table__cell.is-leaf,
/deep/ .el-table td.el-table__cell {
    border: none !important;
}

/deep/ .el-table th {
    padding: 0 !important;
    height: 48px !important;

}

/deep/ .el-table th.el-table__cell.is-leaf .cell {
    line-height: 32px;
    border-left: 1px solid #cccccc !important;
}

/deep/ .el-table .el-table__row td {
    padding: 0 !important;
    height: 40px;
}

/deep/ .el-table th:nth-child(1).el-table__cell.is-leaf .cell {
    border: none !important;
}

/deep/ .el-table--border,
.el-table--group {
    border: none;
}

/deep/ .el-table .el-table__row--striped td {
    background-color: #f5f5f5 !important;
}
</style>
